<template>
	<view class="home-main">
		<view class="content-box">
			<view>
				<view class="header-box">
					<view class="header-title">环境数据</view>
				</view>
				<view class="second-content">
					<view>
						<view class="first-row">
							<view class="image-text">
								<view>
									<!-- 为兼容微信小程序,图片路径需要使用如下绝对路径 -->
									<u-image width="50rpx" height="50rpx"
										src="/static/images/overview/wendu.png"></u-image>
								</view>
								<view>
									<u-count-to :start-val="0" :end-val="25.2" separator="," :duration="1500"
										:decimals="1" :use-easing="true" color="#1890FF" font-size="20"
										bold></u-count-to>
								</view>
							</view>
						</view>
						<view class="num-title">温度(℃)</view>
					</view>
					<view>
						<view class="first-row">
							<view class="first-row">
								<view class="image-text">
									<view>
										<!-- 为兼容微信小程序,图片路径需要使用如下绝对路径 -->
										<u-image width="50rpx" height="50rpx" src="/static/images/overview/shidu.png">
										</u-image>
									</view>
									<view>
										<u-count-to :start-val="0" :end-val="80" separator="," :duration="1500"
											:decimals="1" :use-easing="true" color="#40E0D0" font-size="20"
											bold></u-count-to>
									</view>
								</view>
							</view>
						</view>
						<view class="num-title">湿度(%RH)</view>
					</view>
					<view>
						<view class="first-row">
							<view class="image-text">
								<view>
									<!-- 为兼容微信小程序,图片路径需要使用如下绝对路径 -->
									<u-image width="50rpx" height="50rpx"
										src="/static/images/overview/pm2.png"></u-image>
								</view>
								<view>
									<u-count-to :start-val="0" :end-val="15" separator="," :duration="1500"
										:decimals="1" :use-easing="true" color="#FFA500" font-size="20"
										bold></u-count-to>
								</view>
							</view>
						</view>
						<view class="num-title">PM2.5(μg/m³)</view>
					</view>
					<view>
						<view class="first-row">
							<view class="image-text">
								<view>
									<!-- 为兼容微信小程序,图片路径需要使用如下绝对路径 -->
									<u-image width="50rpx" height="50rpx" src="/static/images/overview/guangzhao.png">
									</u-image>
								</view>
								<view>
									<u-count-to :start-val="0" :end-val="125" separator="," :duration="1500"
										:decimals="1" :use-easing="true" color="#9A60B4" font-size="20"
										bold></u-count-to>
								</view>
							</view>
						</view>
						<view class="num-title">光照(lux)</view>
					</view>
				</view>
			</view>

			<view>
				<view class="header-box">
					<view class="header-title">实时客流</view>
				</view>
				<view class="first-content">
					<view class="num-title">实时在园人数</view>
					<view class="num-value">
						<u-count-to :start-val="0" end-val="2586" separator="," :duration="1500" :use-easing="true"
							color="#00c1ff" bold></u-count-to>
					</view>
					<view class="num-unit">人</view>
				</view>
				<view class="second-content">
					<view>
						<view class="first-row">
							<u-count-to :start-val="0" end-val="12568" separator="," :duration="1500" :use-easing="true"
								color="#188DF8" font-size="18" bold></u-count-to>
							<span class="num-unit">人</span>
						</view>
						<view class="num-title">今日累计入园</view>
					</view>
					<view>
						<view class="first-row">
							<u-count-to :start-val="0" :end-val="23" separator="," :decimals="2" :duration="1500"
								:use-easing="true" color="#188DF8" font-size="18" bold></u-count-to>
							<span class="num-unit">%</span>
						</view>
						<view class="num-title">同比昨日</view>
					</view>
					<view>
						<view class="first-row">
							<u-count-to :start-val="0" end-val="9982" separator="," :duration="1500" :use-easing="true"
								color="#FC8452" font-size="18" bold></u-count-to>
							<span class="num-unit">人</span>
						</view>
						<view class="num-title">今日累计出园</view>
					</view>
					<view>
						<view class="first-row">
							<u-count-to :start-val="0" end-val="20" separator="," :decimals="2" :duration="1500"
								:use-easing="true" color="#FC8452" font-size="18" bold></u-count-to>
							<span class="num-unit">%</span>
						</view>
						<view class="num-title">同比昨日</view>
					</view>
				</view>
				<view class="third-content">
					<!-- <view class="charts-title">
						在园客流动态
					</view> -->
					<view class="charts-box">
						<qiun-data-charts type="line" :opts="peopleOpts" :chartData="peopleChartData" />
					</view>
				</view>
			</view>

			<view>
				<view class="header-box">
					<view class="header-title">票务数据</view>
				</view>
				<view class="third-content">
					<view class="charts-box">
						<qiun-data-charts type="radar" :opts="optsTicket" :chartData="chartDataTicket" />
					</view>
				</view>
			</view>

			<view>
				<view class="header-box">
					<view class="header-title">车位监测</view>
				</view>
				<view class="third-content">
					<view class="charts-box">
						<qiun-data-charts type="bar" :opts="optsCar" :chartData="chartDataCar" />
					</view>
				</view>
			</view>

			<view>
				<view class="header-box">
					<view class="header-title">服务统计</view>
				</view>
				<view class="second-content">
					<view>
						<view class="first-row">
							<u-count-to :start-val="0" :end-val="127" separator="," :duration="1500" :use-easing="true"
								color="#188DF8" font-size="18" bold></u-count-to>
							<span class="num-unit">辆</span>
						</view>
						<view class="num-title">运营电瓶车数量</view>
					</view>
					<view>
						<view class="first-row">
							<u-count-to :start-val="0" :end-val="23" separator="," :duration="1500" :use-easing="true"
								color="#188DF8" font-size="18" bold></u-count-to>
							<span class="num-unit">辆</span>
						</view>
						<view class="num-title">运营游船数量</view>
					</view>
					<view>
						<view class="first-row">
							<u-count-to :start-val="0" :end-val="125" separator="," :duration="1500" :use-easing="true"
								color="#FC8452" font-size="18" bold></u-count-to>
							<span class="num-unit">人</span>
						</view>
						<view class="num-title">在岗服务人员</view>
					</view>
					<view>
						<view class="first-row">
							<u-count-to :start-val="0" :end-val="54" separator="," :duration="1500" :use-easing="true"
								color="#FC8452" font-size="18" bold></u-count-to>
							<span class="num-unit">人</span>
						</view>
						<view class="num-title">安保人员</view>
					</view>
				</view>
				<view class="third-content">
					<view class="charts-box">
						<qiun-data-charts type="ring" :opts="optsOrder" :chartData="chartDataOrder" />
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		queryTicketRealPerson
	} from '@/api/overview.js'
	export default {
		onPullDownRefresh() {
			// this.queryRealPerson()
			uni.stopPullDownRefresh()
		},
		data() {
			return {
				peopleChartData: {},
				peopleOpts: {
					color: ["#188DF8", "#FC8452"],
					padding: [-15, 10, 30, 15],
					enableScroll: false,
					legend: {
						position: "top",
						margin: "30",
						float: "right",
						itemGap: 18
					},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow"
						}
					}
				},
				chartDataCar: {},
				optsCar: {
					color: ["#1890FF", "#91CB74"],
					padding: [20, 30, 10, 5],
					enableScroll: false,
					legend: {
						margin: "10"
					},
					xAxis: {
						boundaryGap: "justify",
						disableGrid: false,
						min: 0,
						axisLine: false,
						max: 40
					},
					yAxis: {},
					extra: {
						bar: {
							type: "group",
							width: 26,
							meterBorde: 1,
							meterFillColor: "#FFFFFF",
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							linearType: "custom",
							barBorderCircle: false,
							seriesGap: 2,
							categoryGap: 2
						}
					}
				},
				chartDataOrder: {},
				optsOrder: {
					rotate: false,
					rotateLock: false,
					color: ["#EE6666", "#91CB74"],
					padding: [5, 10, 5, 5],
					dataLabel: true,
					enableScroll: false,
					legend: {
						show: true,
						position: "right",
						lineHeight: 25
					},
					title: {
						name: "",
						fontSize: 15,
						color: "#666666"
					},
					subtitle: {
						name: "",
						fontSize: 25,
						color: "#7cb5ec"
					},
					extra: {
						ring: {
							ringWidth: 45,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				},
				chartDataTicket: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['radar'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				optsTicket: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE"],
					padding: [5, 5, 5, 5],
					dataLabel: false,
					enableScroll: false,
					legend: {
						show: true,
						position: "right",
						lineHeight: 25
					},
					extra: {
						radar: {
							gridType: "radar",
							gridColor: "#CCCCCC",
							gridCount: 3,
							opacity: 0.2,
							max: 200,
							labelShow: true,
							border: true
						}
					}
				},
				personData: {
					todayReal: 0,
					todayIn: 0,
					huanIn: 0,
					todayOut: 0,
					huanOut: 0
				}
			}
		},
		onReady() {
			// this.queryRealPerson();
			this.getPeopleServerData();
			this.getServerDataCar();
			this.getServerDataOrder();
			this.getServerDataTicket();
		},
		methods: {
			queryRealPerson() {
				queryTicketRealPerson({}).then(res => {
					// console.log('@@@', res)
					if(res.success) {
						this.personData.todayReal = res.returnObj.todayReal
						this.personData.todayIn = res.returnObj.todayIn
						this.personData.huanIn = parseFloat(res.returnObj.huanIn)
						this.personData.todayOut = res.returnObj.todayOut
						this.personData.huanOut = parseFloat(res.returnObj.huanOut)
					}
				})
			},
			getPeopleServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					let res = {
						categories: ["8:00", "12:00", "16:00", "20:00"],
						series: [{
								name: "入园",
								data: [180, 700, 600, 0]
							},
							{
								name: "出园",
								data: [0, 100, 600, 200]
							}
						]
					};
					this.peopleChartData = JSON.parse(JSON.stringify(res));
				}, 0);
			},
			getServerDataCar() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: ["停车场A", "停车场B", "停车场C"],
						series: [{
								name: "占用",
								data: [55, 90, 60]
							},
							{
								name: "空闲",
								data: [45, 10, 40]
							}
						]
					};
					this.chartDataCar = JSON.parse(JSON.stringify(res));
				}, 0);
			},
			getServerDataOrder() {
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						series: [{
							data: [{
								"name": "未完成",
								"value": 103
							}, {
								"name": "已完成",
								"value": 312
							}]
						}]
					};
					this.chartDataOrder = JSON.parse(JSON.stringify(res));
				}, 0);
			},
			getServerDataTicket() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: ["购票", "公众号", "美团", "大众点评", "其它渠道"],
						series: [{
							name: "数量",
							data: [3800, 3500, 2000, 1800, 2000]
						}]
					};
					this.chartDataTicket = JSON.parse(JSON.stringify(res));
				}, 0);
			},
		}
	}
</script>

<style lang="scss">
	.home-main {
		// background-color: #447aff;
		width: 100%;
		height: 100%;
		overflow-y: auto;
		font-family: "montserrat";
		background-image: linear-gradient(125deg, #447aff, #5894F7, #6f86d6, #8fd3f4);
		background-size: 400%;
		animation: bganimation 15s infinite;

		.content-box {
			padding: 20rpx 0;
			display: flex;
			flex-direction: column;

			.header-box {
				display: flex;
				align-items: center;
				width: 100%;
				height: 62rpx;
				background-size: contain;
				background-repeat: no-repeat;
				background-image: url("../../static/images/overview/subtitle.png");
				margin: 20rpx 0 30rpx 0;

				.header-title {
					background: linear-gradient(180deg, #FFFFFF 60%, rgba(255, 255, 255, 0) 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
					margin-left: 80rpx;
					font-size: 30rpx;
					font-weight: 800;
					letter-spacing: 8rpx;
				}
			}

			.first-content {
				margin: 20rpx 20rpx;
				background-color: #FFFFFF;
				border-radius: 20rpx;
				display: flex;
				flex-direction: row;
				padding: 5rpx 0;

				.num-title {
					font-size: 38rpx;
					font-weight: 600;
					color: #48c6ef;
					line-height: 46rpx;
					padding: 30rpx 30rpx 0 30rpx;
					font-weight: 600;
				}

				.num-value {
					color: #2979ff;
					margin-left: 38rpx;
					line-height: 100rpx;
					font-size: 46rpx;
					text-shadow: 0 6rpx 12rpx rgba(51, 168, 255, 0.6);
				}

				.num-unit {
					line-height: 110rpx;
					padding-left: 30rpx;
				}
			}

			.second-content {
				margin: 20rpx 20rpx;
				background-color: #FFFFFF;
				border-radius: 20rpx;
				display: flex;
				justify-content: space-between;
				padding: 30rpx;

				.first-row {
					display: flex;
					align-items: center;
					justify-content: center;

					.image-text {
						display: flex;
						flex-direction: row;
					}

					.num-unit {
						margin-left: 10rpx;
					}

				}

				.num-title {
					font-size: 25rpx;
					margin-top: 4rpx;
					display: flex;
					justify-content: center;
				}
			}

			.third-content {
				margin: 20rpx 20rpx;
				background-color: #FFFFFF;
				border-radius: 20rpx;

				.charts-title {
					font-size: 38rpx;
					font-weight: 600;
					color: #66a6ff;
					line-height: 46rpx;
					padding: 30rpx 30rpx 0 30rpx;
				}

				.charts-box {
					width: 100%;
					height: 580rpx;
				}
			}
		}
	}

	@keyframes bganimation {
		0% {
			background-position: 0% 50%;
		}

		50% {
			background-position: 100% 50%;
		}

		100% {
			background-position: 0% 50%;
		}
	}
</style>